<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <!--TODO 强制将http的资源请求升级为https，之前也是通过https访问端口，是可以获取资源的，https内不可发起http,真实原因不明,暂时用这种方式解决-->
  <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
  <title>登录页</title>
  <!--link-->
  <link rel="stylesheet" href="/wx/lib/bootstrap-5.1.3-dist/css/bootstrap.css">
  <link rel="stylesheet" href="/wx/lib/weui/weui.css">
  <link rel="stylesheet" href="/wx/web/mycss.css">
  <script src="/wx/lib/jquery/jquery-3.6.1.js"></script>
  <script src="/wx/lib/axios/axios.js"></script>
  <script src="/wx/util/httpRequest.js"></script>
  <!--<script src="../../lib/bootstrap-5.1.3-dist/js/bootstrap.bundle.js"></script>-->
  <script src="/wx/lib/vue/vue.js"></script>
</head>
<body data-weui-theme="light">
    <div class="weui-form" id="root" >
      <div class="weui-form__text-area">
        <h2 class="weui-form__title">微信校内系统信息平台</h2>
        <div class="weui-form__desc">请使用学号注册登录</div>
      </div>
      <div class="weui-form__control-area">
        <div class="weui-cells__group weui-cells__group_form">
          <div class="weui-cells">
            <label for="thirdId" class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><span class="weui-label">学号</span></div>
              <div class="weui-cell__bd">
                <input id="thirdId" class="weui-input" v-model="logInfo.thirdId" placeholder="填写本人学号"/>
              </div>
            </label>
            <label for="password" class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><span class="weui-label">密码</span><div class="weui-cell__desc">密码</div></div>
              <div class="weui-cell__bd">
                <input id="password" class="weui-input" placeholder="密码" v-model="logInfo.password" type="password" pattern="[0-9]*" />
              </div>
            </label>
          </div>
        </div>
      </div>
      <div class="weui-form__tips-area">
        <p class="weui-form__tips">
          请使用CA账号登录，登录后账号将与微信绑定
        </p>
      </div>
      <div class="weui-form__opr-area">
        <a role="button" aria-disabled="true" class="weui-btn weui-btn_primary"
           v-bind:class="{ 'weui-btn_disabled': isNotActive }" href="javascript:" id="login_button" @click="login">确定</a>
      </div>
    </div>

    <div role="alert" id="loadingToast" style="display: none;">
      <div class="weui-mask_transparent"></div>
      <div class="weui-toast">
            <span class="weui-primary-loading weui-icon_toast">
              <span class="weui-primary-loading__dot"></span>
            </span>
        <p class="weui-toast__content">登录中</p>
      </div>
    </div>
    <div role="alert" class="weui-toptips weui-toptips_warn" id="topTips">用户名/密码验证错误</div>
<script type="text/javascript">
  //Vue改写
  //获取url携带参数
  function GetQueryString(name){
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if(r!=null)return  unescape(r[2]); return null;
  }
  //获取微信端token
  let form = {
    code:GetQueryString('code'),
    state:GetQueryString('state')
  }
  http({
    url:'/third/thirdUser/getThirdToken',
    method: 'post',
    data:form
  }).then(response => {
    if (response.data.code === "301" ){
      location.href = baseURL + '/web/tabbar/tabbar-grid.html'
    }
  })

  Vue.config.productionTip = false
  const vm = new Vue({
    el:'#root',
    data:{
      logInfo:{
        thirdId:'',
        password:''
      },
      isNotActive:true
    },
    methods: {
      login(){
        //按钮可用时提交请求
        if (this.isNotActive) return
        let loginForm = Object.assign({}, this.logInfo, form)
        //console.log(`请求参数为${JSON.stringify(loginForm)}`)
        //获取thirdId cookie-token
          //弹出登录中图标
        let $loadingToast = $('#loadingToast')
        let $topTips = $('#topTips')
        $loadingToast.fadeIn(200)
        http({
          url:'/third/thirdUser/getThirdIdToken',
          method: 'post',
          data:loginForm
        }).then(response => {
          //登陆中图标淡出
          /*$(function(){
            var $loadingToast = $('#loadingToast')
            $loadingToast.fadeOut(100)
          })*/
          console.log(response)
          if (response.data.code === "301" ){
            location.href = baseURL + '/web/tabbar/tabbar-grid.html'
          }else if (response.data.code === "500"){
            $topTips.show()
            $loadingToast.fadeOut(500)
            $topTips.fadeOut(5000)
          }
        })
      }
    },
    computed:{
    },
    watch:{
      //校验合法值
      logInfo:{
        deep:true,
        handler(){
          //有值提交按钮可用，否则不可用
          // console.log("成功监测变化")
          // console.log(!(this.logInfo.thirdId && this.logInfo.password))
          this.isNotActive = !(this.logInfo.thirdId && this.logInfo.password);
        }
      }
    }
  })
</script>
</body>
</html>